<template>
    <div class="main4">
        <div class="top-box">
                <div class="logo-box">
                    <transition name="one">
                    <img src="../../../assets/indexImg/four_logo.png" alt="" v-show="$store.state.isFlag==3">
                    </transition>
                </div>
            <transition name="two">
            <div class="title"  v-show="$store.state.isFlag==3">
                <span>尚行科技</span>
                <span class="title2">鸿鹄凌云</span>
                <div class="line">
                </div>
            </div>
            </transition>
        </div>
        <div class="bottom-box">
            <transition name="three">
            <h3  v-show="$store.state.isFlag==3">公司</h3>
            </transition>
            <transition name="four">
            <div class="text" v-show="$store.state.isFlag==3">
                尚云科技是一家从事大数据云计算、人工智能、产品开发、咨询服务为一体的综合型互联网科技公司。
                公司由一批BAT等一线互联网IT精英人士创建， 以"快乐工作，认真生活"为愿景，
                以"科技与应用创新驱动发展"为使命， 坚持"客户第一、诚信、激情、拥抱变化"的价值观， 打造客户有依靠、员工有干劲、公司有前景的团队组织。
            </div>
            </transition>
            <transition name="five" >
                <router-link to="/myinfo" tag="div" v-show="$store.state.isFlag==3" class="img-more">
                     <img src="../../../assets/indexImg/four_more.png" alt="" >
                </router-link>
            </transition>
        </div>
    </div>
</template>

<script>
    export default {
        name: "four",
    }
</script>

<style scoped lang="less">
    .one-enter{
        transform: rotate(-560deg);
    }
    .one-enter-active {
        transition: all 0.5s linear 1.2s;
    }
    .two-enter {
        opacity: 0;
        transform:translateY(50px);
    }
    .two-enter-active {
        transition: all 0.5s linear 1.7s;
    }
    .three-enter {
        opacity: 0;
        transform:translateY(50px);
    }
    .three-enter-active {
        transition: all 0.5s linear 2.2s;
    }
    .four-enter {
        opacity: 0;
        transform:translateY(50px);
    }
    .four-enter-active {
        transition: all 0.5s linear 2.7s;
    }
    .five-enter {
        opacity: 0;
        transform:translateY(50px);
    }
    .five-enter-active {
        transition: all 0.5s linear 3.2s;
    }
    .main4{
        height: 100vh;
    }
    .top-box {
    display: flex;
    width: 100%;
    height: 50%;
    justify-content: center;
    position: relative;
    flex-wrap: wrap;
    .logo-box {
        width: 100%;
        text-align: center;
        img {
            height: 136px;
            width: 136px;
            margin-top: 130px;
        }
    }
    .title {
        color: rgb(255, 255, 255);
        font-size: 36px;
        font-family: 微软雅黑;
        position: relative;
        .title2 {
            margin-left: 40px;
        }
        .line {
            width: 20px;
            height: 7px;
            position: absolute;
            top: 50px;
            left: 157px;
            background-color: #71cfff;
        }
    }
}
    .bottom-box {
        position: fixed;
        width: 100%;
        height: 50%;
        overflow: hidden;
        background-color: #fff;
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        h3 {
            width: 100%;
            text-align: center;
            margin-top: 40px;
        }
        .text {    line-height: 26px;
            text-align: center;
            font-family: 微软雅黑;
            position: relative;
            width: 800px;
            font-size: 14px;
            margin: -100px 0px 30px;

        }
        .img-more {
            position: absolute;
            left: calc(50% - 52px);
            width: 104px;
            height: 50px;
            bottom: 24%;
            cursor: pointer;
        }
    }
</style>